<template>
    <div class="com-nav-bar">
        <div class="nav_link" :class="{'type-2': name=='index2'||name=='index3', 'type-5': name=='index2'}">
            <div @click="toPage(item, i)" class="nav_item" :class="{'nav_item_active': active==i, 'nav_item_2': item.type==2 }" v-for="(item, i) in list" :key="i">
                <template v-if="item.type==1">
                    <img v-show="active!=i" class="nav_item_img" :src="item.img" alt="">
                    <img v-show="active==i" class="nav_item_active_img" :src="item.img1" alt="">
                </template>
                <template v-else="">
                    <img class="nav_item_img" :src="item.img" alt="">
                    <div class="nav_item_shadow">
                        <img class="nav_item_img" :src="item.img" alt="">
                    </div>
                </template>
                <div>{{item.name}}</div>
                <button v-if="item.isWode==1&&(!user||!user.nickname)" open-type="getUserInfo" class="nav_kefu_btn" @getuserinfo="getUserInfo">获取用户信息</button>
            </div>
      </div>
    </div>
</template>

<script>
import userApi from "@/api/api-user";
export default {
    props:['activeSrc','name', 'shopId'],
    data () {
        return {
            user: {},
            active: this.activeSrc || 0
        }
    },
    computed:{
        list(){
            var list;
            if(this.name == 'index3'){
                list=[
                    {
                        name: "首页", 
                        img: "/static/images/db_sy.png",
                        img1: "/static/images/db_sy1.png",
                        type: 1,
                        path: "/pages/index/index"
                    },
                    {
                        name: "发现", 
                        img: "/static/images/db_fx.png",
                        img1: "/static/images/db_fx1.png",
                        type: 1,
                        path: "/pages/index/discover"
                    },
                    {
                        name: "订单", 
                        img: "/static/images/db_dd.png",
                        img1: "/static/images/db_dd1.png",
                        type: 1,
                        path: "/pages/personal/order/index"
                    },
                    {
                        name: "我的", 
                        img: "/static/images/db_wd.png",
                        img1: "/static/images/db_wd1.png",
                        type: 1,
                        path: "/pages/personal/index",
                        isWode: 1
                    }
                ]
            } else if(this.name == 'index2'){
                list=[
                    {
                        name: "首页", 
                        img: "/static/images/db_sy.png",
                        img1: "/static/images/db_sy1.png",
                        type: 1,
                        path: "/pages/project2/sjxq?id="+ this.shopId
                    },
                    {
                        name: "购物车", 
                        img: "/static/images/db_gwc.png",
                        img1: "/static/images/db_gwc1.png",
                        type: 1,
                        path: "/pages/personal/shopcar/index2?shopId="+ this.shopId
                    },
                    {
                        name: "我的", 
                        img: "/static/images/db_wd.png",
                        img1: "/static/images/db_wd1.png",
                        type: 1,
                        path: "/pages/personal/index2?shopId="+ this.shopId,
                        isWode: 1
                    }
                ]
            } else if(this.name != 'qiandao'){
                list=[
                    {
                        name: "首页", 
                        img: "/static/images/pro2/db_sy.png",
                        img1: "/static/images/pro2/db_sy1.png",
                        type: 1,
                        path: "/pages/project2/index"
                    },
                    {
                        name: "验证记录", 
                        img: "/static/images/pro2/db_yz.png",
                        img1: "/static/images/pro2/db_yz1.png",
                        type: 1,
                        path: "/pages/project2/hxjl"
                    },
                    {
                        name: "我的", 
                        img: "/static/images/pro2/db_wd.png",
                        img1: "/static/images/pro2/db_wd1.png",
                        type: 1,
                        path: "/pages/personal/hxgywm",
                        isWode: 1
                    }
                ]
            }  else{
                list=[
                    {
                        name: "签到", 
                        img: "/static/images/pro2/db_qd.png",
                        img1: "/static/images/pro2/db_qd1.png",
                        type: 1,
                        path: "/pages/project2/qdxxhy"
                    },
                    {
                        name: "我的", 
                        img: "/static/images/pro2/db_wd.png",
                        img1: "/static/images/pro2/db_wd1.png",
                        type: 1,
                        path: "/pages/personal/hxgywm?type=2",
                        isWode: 1
                    }
                ]
            }

            return list
        }
    },
    watch: {
        '$store.getters.user': {
            handler(n, o){
                this.user = n
            }
        },
        activeSrc: {
            handler(n, o){
                this.active = n
            }
        },
    },
    mounted(){
        this.active = this.activeSrc || 0
        this.user = this.$store.getters.user
    },
    methods: {
        toPage(item, i){
            // this.active = i
            // debugger
            this.$store.dispatch('SetMenuActive', i)
            wx.setNavigationBarTitle({
                title: item.name
            })
            if(i==3){
                //我的

            }
            return
            if(item.isKefu==1){
                
            } else {
                wx.redirectTo({
                    url: item.path
                })
            }
        },
        getUserInfo(e){
            var detail = e.mp.detail
            if(detail.errMsg == 'getUserInfo:ok'){
                userApi.UpdateUserInfoByWx({
                    sessionId: this.$store.getters.user.sessionId,
                    encryptedData: detail.encryptedData,
                    signature: detail.signature,
                    rawData: detail.rawData,
                    iv: detail.iv
                }).then(res => {
                    this.GetUserInfo()
                })
            } else {
                wx.showToast({
                    title: "您拒绝了授权信息，无法进行该操作",
                    icon: "none",
                    duration: 2000
                })
            }
        },
        GetUserInfo(e){
            var vm = this
            userApi.GetUserInfo({}).then(res => {
                vm.user = _.assign(vm.user||vm.$store.getters.user, res.result);
                this.$forceUpdate()
            })
        },
    }
}
</script>

<style lang="scss">
.com-nav-bar {
    height: 80px;
    .nav_link{
        background: #fff;
        position: fixed;
        z-index: 10;
        bottom: 0;
        width: 100%;
        left: 0;
        box-shadow: 0px -5px 5px 0px 
            rgba(204, 204, 204, 0.49);
        display: flex;
        align-items: center;
        .nav_item{
            // width: 20%;
            flex:1;
            display: inline-block;
            text-align: center;
            color: #999;
            font-size: 12px;
            padding: 10px 0 8px 0;
            position: relative;
            img{
                width: 22px;
                height: 22px;
            }
            &.nav_item_active{
                color: #6b69e8;
            }
            .nav_kefu_btn{
                position: absolute;
                opacity: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
                top: 0;
            }
            &.nav_item_2{
                .nav_item_shadow{
                    position: absolute;
                    top: -12px;
                    border-radius: 50%;
                    box-shadow: 0px -5px 5px 0px rgba(204, 204, 204, 0.49);
                    background: #fff;
                    padding: 6px;
                    left: 50%;
                    transform: translateX(-50%);
                    color: #6b69e8;
                    img{
                        width: 32px;
                        height: 32px;
                    }

                }
                >img{
                    visibility: hidden;
                }
            }
        }
        &.type-2{
            .nav_item{
                &.nav_item_active{
                    color: #cda058;
                }
                &.nav_item_2{
                    .nav_item_shadow{
                        color: #cda058;
                    }
                }
            }
        }
        &.type-5{
            .nav_item{
                &.nav_item_2{
                    .nav_item_shadow{
                        display: none;
                    }
                }
            }
        }
    }
}
</style>
